<template>
  <div class="re-container">
    <div class="title">购买登记信息</div>
    <van-form @failed="onFailed" @submit="formSubmit">
      <van-cell-group inset>
        <van-field
          required
          :rules="[{ required: true, message: '请输入姓名' }]"
          v-model="formData.name"
          label="用户名"
          name="pattern"
          placeholder="请输入姓名"
        />
        <van-field
          required
          :rules="[{ required: true, message: '请输入联系方式' }]"
          v-model="formData.phone"
          label="联系方式"
          name="pattern"
          placeholder="请输入联系方式"
        />
        <van-field
          required
          :rules="[{ required: true, message: '请选择购买时间' }]"
          v-model="formData.gmTime"
          is-link
          name="datePicker"
          label="购买时间"
          placeholder="点击选择购买时间"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-date-picker 
          v-model="currentDate"
          @confirm="onConfirm" 
          @cancel="showPicker = false" />
        </van-popup>
        <van-field
          required
          :rules="[{ required: true, message: '请输入购买产品' }]"
          v-model="formData.ypmc"
          label="购买产品"
          name="pattern"
          placeholder="请输入购买产品"
        />
        <van-field
          required
          :rules="[{ required: true, message: '请输入溯源码' }]"
          v-model="formData.shenfenma"
          label="溯源码"
          name="pattern"
          placeholder="请输入溯源码"
        />
        <van-field
          required
          :rules="[{ required: true, message: '请输入重量' }]"
          v-model="formData.zhongliang"
          label="重量（kg）"
          type="number"
          name="pattern"
          placeholder="请输入"
        />
        <van-field disabled label="" name="pattern" placeholder="" />
      </van-cell-group>
      <van-checkbox
        @click="handleRadio"
        icon-size="12px"
        style="font-size: 14px; margin-left: 33px"
        checked-color="#46cf89"
        v-model="checked"
        shape="square"
        >本人承诺以上信息的真实性</van-checkbox
      >
      <div class="btn-wrap">
        <van-button
          @click="handleCancel"
          color="#e0dcdcc4"
          style="width: 100px"
          round
          block
          native-type="submit"
        >
          取消
        </van-button>
        <van-button
          color="#46cf89"
          style="width: 100px"
          round
          block
          type="primary"
          native-type="submit"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { addByXieYouYuan } from "../../apis/home";
import { useRouter } from "vue-router";
import { ref } from "vue";
import dayjs from 'dayjs';
const router = useRouter();
const data = JSON.parse(localStorage.getItem("formData"));
const currentDate = dayjs(new Date()).format('YYYY-MM-DD').split('-')
const formData = ref({
  name: "",
  phone: "",
  gmTime: currentDate.join('-'),
  ypmc: data.name,
  shenfenma: data.suyuanma,
  zhongliang: "",
});
const showPicker = ref(false);
const checked = ref(false);

const onFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};

const handleCancel = () => {
  router.push("/home");
};

const handleRadio = (event) => {
  console.log(checked.value);
};

const onConfirm = ({ selectedValues }) => {
  formData.value.gmTime = selectedValues.join("-");
  console.log(formData.value.gmTime);
  showPicker.value = false;
};

const formSubmit = () => {
  console.log(66666);
  if (checked.value == false) {
    showDialog({
      title: "提示",
      message: "请勾选“承诺选框”。",
    }).then(() => {
      // on close
    });
  } else {
    formData.value.zhongliang = formData.value.zhongliang * 1;
    console.log(formData.value);
    addByXieYouYuan(formData.value).then((res) => {
      console.log(res);
      if (res.code == 0) {
        showDialog({
          title: "提示",
          message: "提交成功！",
        }).then(() => {
          // on close
          router.push("/home");
        });
      } else {
        showDialog({
          title: "提示",
          message: "提交失败，请重试",
        }).then(() => {});
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.re-container {
  padding: 20px;

  .title {
    font-size: 20px;
    font-weight: 600;
  }

  .van-form {
    margin-top: 20px;
    color: #e0dcdcc4;
  }

  .btn-wrap {
    padding: 0 50px;
    margin-top: 70px;
    display: flex;
    justify-content: space-around;
  }
}
</style>
